<!--用户管理页-->
<template>
  <div style="height: 6vh;padding: 10px 20px;background-color: #ffffff">
    <span style="line-height: 60px;font-size: 20px;">用户管理</span>
    <!--    <el-button type="primary" @click="beforeAddUser"-->
    <!--               style="float: right;margin-top: 10px">新建用户</el-button>-->
  </div>
  <!--  新建用户弹窗-->
  <!--  :before-close="handleClose"在弹窗关闭前调用此自定义函数
        这样避免点击弹窗外部也能将弹窗关闭的问题-->
  <!--  <el-dialog :title="dialogTitle"-->
  <!--             style="width: 1000px;padding: 40px"-->
  <!--             v-model="dialogVisible"-->
  <!--             :before-close="handleClose"-->
  <!--  >-->
  <!--    <el-form label-position="top" label-width="80px">-->
  <!--      <el-row :gutter="10">-->
  <!--        <el-col :span="12">-->
  <!--          <el-form-item label="用户名">-->
  <!--            <el-input placeholder="请输入用户名" v-model="saveUserForm.username"-->
  <!--                      :disabled="saveUserForm.id!=null"></el-input>-->
  <!--          </el-form-item>-->
  <!--        </el-col>-->
  <!--        <el-col :span="12">-->
  <!--          <el-form-item label="手机号">-->
  <!--            <el-input placeholder="请输入手机号" v-model="saveUserForm.phone"></el-input>-->
  <!--          </el-form-item>-->
  <!--        </el-col>-->
  <!--      </el-row>-->
  <!--      <el-row :gutter="10">-->
  <!--        <el-col :span="12">-->
  <!--          <el-form-item label="邮箱">-->
  <!--            <el-input placeholder="请输入邮箱" v-model="saveUserForm.email"></el-input>-->
  <!--          </el-form-item>-->
  <!--        </el-col>-->
  <!--        <el-col :span="12">-->
  <!--          <el-form-item label="年龄">-->
  <!--            <el-input placeholder="请输入年龄"v-model="saveUserForm.age"></el-input>-->
  <!--          </el-form-item>-->
  <!--        </el-col>-->
  <!--      </el-row>-->
  <!--      <el-row>-->
  <!--        <el-col :span="6">-->
  <!--          <el-form-item label="职级">-->
  <!--            <el-select placeholder="请选择" v-model="saveUserForm.level" @change="loadLeader">-->
  <!--              &lt;!&ndash;          <el-option label="职员" value="10"></el-option>&ndash;&gt;-->
  <!--              &lt;!&ndash;          <el-option label="经理" value="20"></el-option>&ndash;&gt;-->
  <!--              &lt;!&ndash;          <el-option label="总监" value="30"></el-option>&ndash;&gt;-->
  <!--              &lt;!&ndash;          <el-option label="总裁" value="40"></el-option>&ndash;&gt;-->
  <!--              <el-option v-for="item in levelOptions" :label="item.label" :value="item.value"></el-option>-->
  <!--            </el-select>-->
  <!--          </el-form-item>-->
  <!--        </el-col>-->
  <!--        <el-col :span="6">-->
  <!--          <el-form-item label="直属领导">-->
  <!--            <el-select placeholder="请选择" v-model="saveUserForm.parentId">-->
  <!--              <el-option v-for="item in leaderOptions" :label="item.username" :value="item.id"></el-option>-->
  <!--            </el-select>-->
  <!--          </el-form-item>-->
  <!--        </el-col>-->
  <!--        <el-col :span="4">-->
  <!--          <el-form-item label="性别">-->
  <!--            <el-radio-group v-model="saveUserForm.gender">-->
  <!--              &lt;!&ndash;          上面太大了会掉块&ndash;&gt;-->
  <!--              <el-radio border label="男" value="1" style="margin: 0"></el-radio>-->
  <!--              <el-radio border label="女" value="0"></el-radio>-->
  <!--            </el-radio-group>-->
  <!--          </el-form-item>-->
  <!--        </el-col>-->
  <!--        <el-col :span="6">-->
  <!--          <el-form-item label="用户状态">-->
  <!--            <el-radio-group v-model="saveUserForm.status">-->
  <!--              <el-radio  border label="启用" value="1" style="margin: 0"></el-radio>-->
  <!--              <el-radio  border label="禁用" value="0"></el-radio>-->
  <!--            </el-radio-group>-->
  <!--          </el-form-item>-->
  <!--        </el-col>-->
  <!--      </el-row>-->
  <!--    </el-form>-->
  <!--    &lt;!&ndash;    弹窗有自己的页脚并会自己设置样式&ndash;&gt;-->
  <!--    <template #footer>-->
  <!--      <el-button @click="handleClose">取消</el-button>-->
  <!--      <el-button type="primary" @click="saveUser">保存</el-button>-->
  <!--    </template>-->
  <!--  </el-dialog>-->
  <!--  用户搜索卡片-->
  <el-card style="height: 70px;margin: 20px">
    <el-form :inline="true" >
      <el-form-item label="用户账号" style="width: 220px" >
        <el-input placeholder="输入用户账号" v-model="searchUserForm.tel" @keydown.enter="loadUser"></el-input>
      </el-form-item>
      <el-form-item label="用户名" style="width: 220px" >
        <el-input placeholder="输入用户名" v-model="searchUserForm.username" @keydown.enter="loadUser"></el-input>
      </el-form-item>
      <el-form-item label="用户状态" style="width: 290px">
        <el-select placeholder="请选择用户状态" v-model="searchUserForm.status" @change="loadUser">
          <el-option label="启用" value="1"></el-option>
          <el-option label="禁用" value="0"></el-option>
        </el-select>
      </el-form-item>
      <el-button style="position: relative;bottom: 10px" @click="resetSearch">重置</el-button>
      <el-button style="position: relative;bottom: 10px" type="primary" @click="loadUser">查询</el-button>
    </el-form>




  </el-card>
  <!--  用户数据表格-->
  <el-card style="margin: 20px">
    <el-table :data="userArr">
      <el-table-column type="index" label="编号" width="80px" align="center"></el-table-column>
      <el-table-column label="用户账号" prop="tel" align="center"></el-table-column>
      <el-table-column label="用户名" prop="username" align="center"></el-table-column>
      <el-table-column label="加入时间" prop="createTime" align="center"></el-table-column>
      <el-table-column label="用户状态" prop="status" align="center">
        <template #default="scope">
          <el-switch active-value="1"
                     inactive-value="0"
                     @change="changeStatus(scope.row.id,scope.row.status)"
                     v-model="scope.row.status"
                     :disabled="scope.row.level==40"></el-switch>
        </template>
      </el-table-column>
      <el-table-column label="操作"  align="center">
        <template #default="scope">
          <el-button link type="primary" :disabled="scope.row.level==40"
                     @click="resetPassword(scope.row.id)">密码重置</el-button>
          <!--          <el-button link type="primary" :disabled="scope.row.level==40"-->
          <!--                     @click="editUser(scope.row.id)">编辑</el-button>-->
          <el-button link type="primary" :disabled="scope.row.level==40"
                     @click="deleteUser(scope.row.id,scope.row.username)">删除</el-button>
        </template>

      </el-table-column>
    </el-table>
  </el-card>
</template>

<script setup>
import {onMounted, ref} from "vue";
import axios from "axios";
import qs from "qs"
import {ElMessage} from "element-plus";

// 定义变量控制弹窗是否出现
const dialogVisible = ref(false)
// 定义职级数组
const levelOptions = ref([
  {label:'职员',value:'10'},
  {label:'经理',value:'20'},
  {label:'总监',value:'30'},
  {label:'总裁',value:'40'},
])
// 定义数组来维护员工直属领导数组
const leaderOptions = ref([

])
// 定义对象用来保存表单中的员工数据
const saveUserForm = ref({
  username:'',
  phone:'',
  email:'',
  age:'',
  level:'',
  parentId:'',
  gender:'',
  status:''
})

const beforeAddUser =()=>{
//   弹窗出现
  dialogVisible.value = true
//   标题修改成新建用户
  dialogTitle.value = '新建用户'
}
//点击弹窗中的“保存用户按钮”=>新增+更新用户
const saveUser = () =>{
  // // console.log(saveUserForm.value)
  // let data = qs.stringify(saveUserForm.value)
  // console.log(data)
  // axios.post(BASE_URL+'/v1/user/save',data)
  //     .then((response) => {
  //       if (response.data.code == 2000){
  //         ElMessage.success('保存成功')
  //         //   用户确认关闭后关闭弹窗
  //         dialogVisible.value = false;
  //         //   清空已输入的表单数据
  //         saveUserForm.value={}
  //         //   加载页面
  //         loadUser()
  //       }else {
  //         ElMessage.error(response.data.msg)
  //       }
  //     })

}
// 处理弹窗关闭的方法
const handleClose = () =>{
  if (confirm('确认要关闭本窗口吗？')){
    //   用户确认关闭后关闭弹窗
    dialogVisible.value = false;
    //   清空已输入的表单数据
    saveUserForm.value={}
  }
}
// 定义对象来保存用户查询的条件
const searchUserForm = ref({tel:'',username:'',status:''});
// 定义对象保存查询到的用户表格数据
const userArr = ref([])
//
const loadUser = () =>{
//   // console.log(searchUserForm.value)
//   将得到的JS对象转成qs字符串
  let data = qs.stringify(searchUserForm.value)
//   发送get请求
  axios.get(BASE_URL+'7073'+'/v1/user/select?'+data)
      .then((response)=>{
        if (response.data.code == 2000){
          userArr.value= response.data.data;
          console.log(userArr.value)
        }else {
          ElMessage.error(response.data.msg)
        }
      })
}
// 生命周期函数页面加载完毕立即调用
onMounted(()=>{
  loadUser();
})
// 重置搜索
const resetSearch = () =>{
  // 清空之前的搜索内容
  searchUserForm.value={}
  // 重新加载所有的用户数据
  loadUser()
}
// 定义方法获取直属领导数据
const loadLeader = () =>{
// //优化：如果已经勾选了直属领导，再想重新选择职级的话，需要将之前的领导数组与已选的直属领导都清空
//   leaderOptions.value=[];
//   saveUserForm.value.parentId='';
// //   获取职级 并在此基础上加10 注意转为Number类型
//   let level = parseInt(saveUserForm.value.level)+10
// //   将职级发送给后端 获取直属领导有哪些人
//   axios.get(BASE_URL+'/v1/user/select?level='+level)
//       .then((response)=>{
//         if (response.data.code==2000){
//           //   把得到的直属领导保存到leaderOptions里面
//           leaderOptions.value=response.data.data
//         }else {
//           ElMessage.error(response.data.msg)
//         }
//
//       })
}
// 定义重置密码的方法 restful风格
const resetPassword = (userId) =>{
  axios.post(BASE_URL+'7073'+'/v1/user/update/password/'+userId)
      .then((response)=>{
        if (response.data.code==2000){
          ElMessage.success('密码重置成功')
        }else {
          ElMessage.error(response.data.msg)
        }
      })
}
// 定义变量用来控制弹窗的标题
const dialogTitle = ref('新建用户');
// 点击用户表格的编辑按钮 出弹窗+修改弹窗标题
const editUser = (id) =>{
//   // console.log(id)
// // 弹窗出现
//   dialogVisible.value = true
// //   改标题
//   dialogTitle.value='编辑用户'
// //   根据id查询用户信息并回显在弹窗的表单中
//   axios.get(BASE_URL+'/v1/user/select?id='+id)
//       .then((response)=>{
//         if (response.data.code==2000){
//           //   因为返回的是集合所以要集合的第一条数据
//           saveUserForm.value = response.data.data[0]
//           let level = parseInt(saveUserForm.value.level)+10
//           //   将职级发送给后端 获取直属领导有哪些人
//           axios.get(BASE_URL+'/v1/user/select?level='+level)
//               .then((response)=>{
//                 if (response.data.code==2000){
//                   //   把得到的直属领导保存到leaderOptions里面
//                   leaderOptions.value=response.data.data
//                 }else {
//                   ElMessage.error(response.data.msg)
//                 }
//
//               })
//         }else {
//           ElMessage.error(response.data.msg)
//         }
//       })
}
// 修改员工状态
const changeStatus = (userId,status)=>{
  axios.post(BASE_URL+'7073'+'/v1/user/update/status/'+userId+'/'+status)
      .then((response)=>{
        if (response.data.code==2000){
          ElMessage.success('状态修改成功')
        }else {
          ElMessage.error(response.data.msg)
        }
      })
}
// 删除员工信息
const deleteUser =(userId,username)=>{
  // 出现确认框你是否要删除
  if (confirm("你是否要删除"+username)){
    axios.post(BASE_URL+'7073'+'/v1/user/delete/'+userId)
        .then((response)=>{
          if (response.data.code==2000){
            ElMessage.success('删除成功')
            //   重新加载页面
            loadUser()
          }else {
            ElMessage.error(response.data.msg)
          }
        })
  }
}
</script>

<style scoped>

</style>